<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./public/reset.css">
<style>
    #GoodsDetails{width: 100%;}
    .GoodsDetails{width: 1200px;margin: 0px auto;}

    /* 商品路径板块样式 */
    .GoodsPath{height: 42px;margin: 0px 5px;overflow: hidden;}
    .GoodsPath>li{font-size: 12px;color: #777; float: left;padding: 0px 2px;}
    
    /* 放大镜板块样式 */
    .magnifying{display: flex;position: relative;}
    .small_box{width: 350px;height: 350px;position: relative;border: 1px solid gray;}
    .small_box img{width: 350px;height: 350px;}
    .small_box span{background: rgba(200,200,200,0.5);position: absolute;left:0;top:0;display: none;}
    .small_box em{position: absolute;left:0;top:0;right:0;bottom: 0;z-index: 1;}

    .cont ul{margin: 0;padding: 0;list-style: none;display: flex;}
    .cont li{width: 50px;height: 50px;border: solid 4px #fff;}
    .cont li.active{border-color: #000;}
    .cont li img{width: 50px;height: 50px;}

    .big_box{width: 350px;height: 350px;overflow: hidden;display: none;position: absolute;left:360px;top: 0px;border: 1px solid #616161;z-index: 999;}
    .big_box img{width: 800px;height: 800px;position: absolute;}
    .magnifying-details{flex-grow: 1;margin-left: 20px;}
    .magnifying-details-top{font-size: 18px;}
    .magnifying-details-top>h1{color: #333;font-size: 18px;}
    .magnifying-details-top>p{color: #c00;}
    .magnifying-details-middle{border-top: 1px solid #c2c2c2;border-bottom: 1px solid #c2c2c2;font-size: 12px;padding:0px 0px 10px 10px}
    .magnifying-details-middle>li{height: 28px;line-height: 28px;}
    .magnifying-details-middle .gPrice{color: #e2051b;}
    .magnifying-details-bottom{overflow: hidden;margin-top: 20px;position: relative;}
    #Carts{float: left;}
    #Collect{float: left;position: absolute;left: 120px;bottom: 0px;}

    /* 商品详情板块样式 start*/
    .goodsInformations{margin-top: 30px;display: flex;}
    .sidebar{width: 200px;}
    .contentInformations{margin-left: 20px;flex-grow: 1;}

    /* 商品侧边推荐信息样式 start*/
    .sidebar>div{color: #616161;width: 100%;font-size: 12px;line-height: 40px;line-height: 39px;border: 1px solid #ddd;margin-bottom: 30px;}
    .sidebar>div>p{font-weight: bold;color: #666;background-color: #f8f8f8;padding-left: 10px;border-bottom: 1px solid #ddd;}
    .sidebar>div>div{padding-left: 10px;width: 100%;}
    /* 商品侧边推荐信息样式 end*/
    
    /* 商品介绍详情样式 start*/
    .contentInformations>ul{display: flex;border-bottom: 1px solid #e2051b;font-size: 12px;color: #616161;}
    .contentInformations>ul>li{flex-grow: 1;text-align: center;line-height: 30px;border: 1px solid #c2c2c2;border-bottom: none;}
    .contentInformations>div>ul{width: 100%;}
    .contentInformations>div>ul>li{color: #666;font-size: 13px;line-height: 23px;padding-left: 32px;}
    /* 商品介绍详情样式 end*/

    /* 商品详情板块样式 end*/

</style>
<script src="./JSlibrary/icon/footer/iconfont.js"></script>
<script src="./public/JQuery/jquery.3.5.0.js"></script>
<script src="./JSlibrary/productDisplay.js"></script>
<body>
    <div id="header"></div>
    <div id="GoodsDetails">
        <div class="GoodsDetails">
            <ul class="GoodsPath">
                <li>首页</li>
                <li>></li>
                <li>办公用纸</li>
                <li>></li>
                <li>复印纸</li>
                <li>></li>
                <li>A4复印纸</li>
                <li>></li>
                <li>得力</li>
                <li>></li>
                <li>得力Z7246红柏复印纸A4 70g 50张/包 5包/箱(单位：包)白色</li>
            </ul>
            <div class="magnifying">
                <div class="cont">
                    <div class="small_box">
                        <img src="" alt="">
                        <span></span>
                        <em></em>
                    </div>
                    <ul>
                        <li><img src="" alt=""></li>
                        <li><img src="" alt=""></li>
                        <li><img src="" alt=""></li>
                        <li><img src="" alt=""></li>
                    </ul>
                </div>
                <div class="big_box">
                    <img src="" alt="">
                </div>
                <div class="magnifying-details">
                    <div class="magnifying-details-top">
                        <h1></h1>
                        <p></p>
                    </div>
                    <ul class="magnifying-details-middle">
                       <li><span>销售价：￥</span><span class="gPrice"></span></li>
                       <li><span>商品编号：</span><span class="gID"></span></li>
                       <li><span>商品货号：</span><span class="gForm"></span></li>
                       <li><span>商品品牌：</span><span class=gBrand></span></li>
                       <li><span>选择包装：</span><span>包</span><span>箱(5包)</span></li>
                       <li><span>库存状况：</span><span class="gRepertory">可订购</span></li>
                       <li><span>我要购买：</span><a href=""><img src="./images/goodsdetails/icon/subbtn.gif" alt=""></a><input type="text" value="1" style="width: 10px; height: 20px;"><a href=""><img src="./images/goodsdetails/icon/addbtn.gif" alt=""></a></li> 
                    </ul>
                    <div class="magnifying-details-bottom">
                        <div id="Carts"><img src="./images/normalLib/detail/other/xbBtnAddcart.gif" alt=""></div>
                        <div id="Collect"><img src="./images/normalLib/detail/other/xbBtnSave.gif" alt=""></div>
                    </div>
                </div>
            </div>
            <div class="goodsInformations">
                <div class="sidebar">
                    <div class="sidebar-look">
                        <p>看过此商品的顾客还看过</p>
                        <div>暂无商品</div>
                    </div>
                    <div class="sidebar-buy">
                        <p>购买过此商品的顾客还购买过</p>
                        <div>暂无商品</div>
                    </div>
                    <div class="sidebar-hot">
                        <p>同类最热销</p>
                        <ul>
                            <li>
                                <img src="" alt="">
                                <p>得力（deli）Z7501木尚复印纸A4-70g-100013338</p>
                                <p><span>现价：</span><span>￥28.50</span></p>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
                <div class="contentInformations">
                    <ul>
                        <li>商品信息</li>
                        <li>产品属性</li>
                        <li>交易记录(0)</li>
                        <li>产品咨询(0)</li>
                        <li>售后服务</li>
                        <li>退换货政策</li>
                    </ul>
                    <div>
                        <ul>
                            <li><span>品牌：</span><span>得力</span></li>
                            <li><span>系列：</span><span>红柏</span></li>
                            <li><span>型号：</span><span>Z7246</span></li>
                            <li><span>规格：</span><span>500张/包</span></li>
                            <li><span>颜色：</span><span>白色</span></li>
                        </ul>
                        <div><img src="" alt=""></div>
                    </div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</body>
<script>$("#footer").load("http://localhost:3000/public/public.html .footer")</script>
<script>$("#header").load("http://localhost:3000/public/public.html .header", function () {
    const oun = document.querySelectorAll(".un");
    if (localStorage.getItem("isLogin") === "ok") {
        for (i = 0; i < oun.length; i++) {
            oun[i].innerHTML = localStorage.getItem("username");
        }
    } else {
        oun.innerHTML = "xxx";
    }
})</script>
</html>